@import "../../assets/css/base.scss";
@import "../../assets/css/mixin.scss";

.player {
    & .player-full {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1992;
        display: none;
        background: #000;
        &.player-full-enter {
            transform: translate3d(0,50%,0);
            opacity: 0;
        }
        &.player-full-enter-active {
            opacity: 1;
            transition: all .15s ease-out;
            transform: translate3d(0,0,0);
        }
        &.player-full-exit {
            transform: translate3d(0,0,0);
            opacity: 1;
        }
        &.player-full-exit-active {
            opacity: 0;
            transition: all .15s ease-out;
            transform: translate3d(0,50%,0);
        }
        .player-bg {
            width: 100%;
            height: 100%;
            filter: blur(30px);
            transform: scale(1.5);
            @include bg-full;
            &:after {
                content : '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                background-color: rgba(0,0,0,.25);
            }
        }
        .header {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1;
            height: 120px;
            padding: 20px 170px;
            border-bottom: 1px solid rgba(255,255,255,.15);
            .header-back {
                position: absolute;
                top: 44px;
                left: 44px;
                display: block;
                width: 72px;
                height: 72px;
                @include bg-url("../../assets/img/oq.png");
                @include bg-full;
            }
            h1 {
                height: 60px;
                line-height: 70px;
                font-size: 40px;
                color: #fff;
                @include no-wrap;
            }
            h2 {
                height: 60px;
                line-height: 60px;
                font-size: 32px;
                color: rgba(255,255,255,.4);
                @include no-wrap;
            }
        }
        .middle {
            position: absolute;
            top: 160px;
            right: 0;
            left: 0;
            bottom: 360px;
        }
        .footer {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 20px;
            height: 320px;
            .progress-wrapper {
                display: flex;
                height: 20px;
                padding: 8px 50px 0;
                .progress-time {
                    width: 120px;
                    line-height: 20px;
                    font-size: $font-size-small-ss;
                    color: #fff;
                    &.progress-time-l {
                        text-align: left;
                    }
                    &.progress-time-r {
                        text-align: right;
                    }
                }
            }
            .btn-wrapper {
                display: flex;
                justify-content: space-around;
                align-items: center;
                height: 252px;
                .btn {
                    @include bg-full;
                    &.btn-mode {
                        width: 162px;
                        height: 162px;
                        margin-right: 30px;
                        &.mode-list {
                            @include bg-url("../../assets/img/player/mode-list.png");
                        }
                        &.mode-random {
                            @include bg-url("../../assets/img/player/mode-random.png");
                        }
                        &.mode-single {
                            @include bg-url("../../assets/img/player/mode-single.png");
                        }
                    }
                    &.btn-prev {
                        width: 214px;
                        height: 214px;
                        @include bg-url("../../assets/img/player/prev.png");
                    }
                    &.btn-play {
                        width: 252px;
                        height: 252px;
                        @include bg-url("../../assets/img/player/play.png");
                        &.btn-pause {
                            @include bg-url("../../assets/img/player/pause.png");
                        }
                    }
                    &.btn-next {
                        width: 214px;
                        height: 214px;
                        @include bg-url("../../assets/img/player/next.png");
                    }
                    &.btn-list {
                        width: 162px;
                        height: 162px;
                        margin-left: 20px;
                        @include bg-url("../../assets/img/player/list.png");
                    }
                }
            }
        }
    }
    & .player-min {
        display: flex;
        align-items: center;
        padding: 20px;
        background: #fff;
        box-shadow: 0 -1px 8px rgba(0,0,0,.1);
        &-img {
            width: 110px;
            height: 110px;
            margin-right: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        &-info {
            min-width: 0;
            flex: 1;
            font-size: $font-size-small-ss;
            color: #888;
            h2,p {
                @include no-wrap;
            }
            h2 {
                height: 60px;
                line-height: 60px;
                font-size: $font-size-small;
                color: #333;
            }
            p {
                height: 50px;
                line-height: 50px;
            }
        }
        &-play {
            width: 90px;
            height: 90px;
            margin-right: 50px;
            @include bg-full;
            @include bg-url("../../assets/img/player/min-play.png");
            &.pause {
                @include bg-url("../../assets/img/player/min-pause.png");
            }
        }
        &-list {
            width: 90px;
            height: 90px;
            @include bg-full;
            @include bg-url("../../assets/img/player/min-list.png");
        }
    }
}
